<template>
  <div>
    <uni-list-query-card :queryShow="queryShow" @query-click="getApiDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="6">
        <el-form-item label="接口名称">
          <el-select v-model="dataForm.apiCode" clearable>
            <el-option v-for="template in apiList" :key="template.id"
                       :label="template.apiName" :value="template.apiCode"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="接口健康日期">
          <el-date-picker
            v-model="dataForm.apiDate"
            type="month"
            placeholder="">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </uni-list-query-card>
    <el-calendar :range="dateCells">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
        </p>
        <p>
        </p>
      </template>
    </el-calendar>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        activatedIsNeed: false
      },
      headLock: false,
      apiList: [],
      apiDataList: [],
      dateCells: ['2020-08-31', '2020-10-04'],
      dataForm: {
        apiCode: '',
        apiDate: ''
      }
    }
  },
  created () {
    // 通过路由参数pid, 控制列表请求操作
    this.$nextTick(() => {
      this.dataForm = {
        apiCode: ''
      }
      if (this.$route.params.apiCode) {
        this.dataForm.apiCode = this.$route.params.apiCode
        this.dataForm.apiDate = this.$route.params.reqTime
        this.getApiDataList()
      } else {
        this.dataForm.apiDate = new Date()
      }
      this.changeDateCell()
      this.getApiList()
    })
  },
  methods: {
    getApiList () {
      this.$http.get(`/api/apiConf/list`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.apiList = res.data
      }).catch(() => { })
    },
    changeDateCell () {
      let dateStr = this.$xeutils.toDateString(this.dataForm.apiDate, 'yyyy-MM-dd')
      this.$http.get(`/api/apiMonitor/getApiHealthDayStr?selectDate=${dateStr}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.dateCells = res.data
      }).catch(() => { })
    },
    getCellApiData (data) {
      this.apiDataList.forEach(res => {
        console.log(res)
      })
    },
    getApiDataList () {
      if (!this.dataForm.apiCode) {
        return this.$message.error('请选择接口')
      }
      let dateStr = this.$xeutils.toDateString(this.dataForm.apiDate, 'yyyy-MM-dd')
      this.$http.get(`/api/apiMonitor/getApiHealthDataOnMonth?apiCode=${this.dataForm.apiCode}&&selectDate=${dateStr}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          this.apiDataList = res.data.dateCellData
          this.dateCells = res.data.dateCells
        }).catch(() => { })
    }
  }
}
</script>
<style scoped>
  ::v-deep .el-calendar-table .el-calendar-day {
    height: 65px;
  }
</style>
